<!documentTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>自定义查询</title>
		<script src="../js/mui.min.js"></script>
		<script src="../js/echarts.min.js"></script>
		<script src="../js/base64.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">查询结果</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="chart" id="xueyaChart"></div>
			</div>
			<div class="mui-content-padded">
				<div class="chart" id="xinlvChart"></div>
			</div>
			<div class="mui-content-padded">
				<div class="chart" id="maiboChart"></div>
			</div>
			<div class="mui-content-padded">
				<div class="chart" id="tiwenChart"></div>
			</div>
			<div class="mui-button-row">
				<button type="button" onclick="exportChart();" class="mui-btn mui-btn-primary" >一键导出</button>
			</div>
			<div style="height:44px;"></div>
		</div>
		
		<script>
			mui.init();
			var queryUserTimestep = new Array();
			var queryUserXueya = new Array();
			var queryUserXueya1 = new Array();
			var queryUserXueya2 = new Array();
			var queryUserXinlv = new Array();
			var queryUserMaibo = new Array();
			var queryUserTiwen = new Array();
			queryUserTimestep = JSON.parse(localStorage.getItem('queryUserTimestep'));
			//alert(queryUserTimestep[0]);
			queryUserXueya = JSON.parse(localStorage.getItem('queryUserXueya'));
			for(var i = 0, len = queryUserXueya.length; i < len; i++){
				var tmp = new Array();
				tmp = queryUserXueya[i].split("/");
				queryUserXueya1[i] = tmp[1];
				queryUserXueya2[i] = tmp[0];
			}
			queryUserXinlv = JSON.parse(localStorage.getItem('queryUserXinlv'));
			queryUserMaibo = JSON.parse(localStorage.getItem('queryUserMaibo'));
			queryUserTiwen = JSON.parse(localStorage.getItem('queryUserTiwen'));
			var chartOption = new Array();
			chartOption[0] = {
				title: {
					text: '血压变化',
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data:['收缩压','舒张压']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: queryUserTimestep
				},
				yAxis: {
					type: 'value',
					min: 40
				},
				series: [
					{
						name:'收缩压',
						type:'line',
						itemStyle: {
							color: '#c23531'
						},
						markLine: {
							data: [
								{
									name: '正常最高收缩压',
									yAxis: 139
								},
								{
									name: '正常最低收缩压',
									yAxis: 90
								}
							]
						},
						data:queryUserXueya1
					},
					{
						name:'舒张压',
						type:'line',
						itemStyle: {
							color: '#91c7ae'
						},
						markLine: {
							data: [
								{
									name: '正常最高舒张压',
									yAxis: 89
								},
								{
									name: '正常最低舒张压',
									yAxis: 60
								}
							]
						},
						data:queryUserXueya2
					}
				]
			};
			chartOption[1] = {
				title: {
					text: '心率变化',
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data:['心率']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: queryUserTimestep
				},
				yAxis: {
					type: 'value',
					min: 40
				},
				series: [
					{
						name:'心率',
						type:'line',
						itemStyle: {
							color: '#2f4554'
						},
						markLine: {
							data: [
								{
									name: '正常最高心率',
									yAxis: 100
								},
								{
									name: '正常最低心率',
									yAxis: 60
								}
							]
						},
						data:queryUserXinlv
					}
				]
			};
			chartOption[2] = {
				title: {
					text: '脉搏变化',
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data:['脉搏']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: queryUserTimestep
				},
				yAxis: {
					type: 'value',
					min: 40
				},
				series: [
					{
						name:'脉搏',
						type:'line',
						itemStyle: {
							color: '#61a0a8'
						},
						markLine: {
							data: [
								{
									name: '正常最高脉搏',
									yAxis: 100
								},
								{
									name: '正常最低脉搏',
									yAxis: 60
								}
							]
						},
						data:queryUserMaibo
					}
				]
			};
			chartOption[3] = {
				title: {
					text: '体温变化',
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data:['体温']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: queryUserTimestep
				},
				yAxis: {
					type: 'value',
					min: 34,
					axisLabel: {
						formatter: '{value} °C'
					}
				},
				series: [
					{
						name:'体温',
						type:'line',
						itemStyle: {
							color: '#d48265'
						},
						markLine: {
							data: [
								{
									name: '正常最高体温',
									yAxis: 37
								},
								{
									name: '正常最低体温',
									yAxis: 35.9
								}
							]
						},
						data:queryUserTiwen
					}
				]
			};
			echarts.init(document.getElementById('xueyaChart')).setOption(chartOption[0]);
			echarts.init(document.getElementById('xinlvChart')).setOption(chartOption[1]);
			echarts.init(document.getElementById('maiboChart')).setOption(chartOption[2]);
			echarts.init(document.getElementById('tiwenChart')).setOption(chartOption[3]);
			
			function exportChart(){
				var sheetData = {
					queryUserTimestep,
					queryUserXueya1,
					queryUserXueya2,
					queryUserXinlv,
					queryUserMaibo,
					queryUserTiwen
				};
				var json = sheetData;
				var jsonStr = Base64.encode(JSON.stringify(json));
				//alert(jsonStr);
				var oInput = document.createElement('input');
				oInput.value = jsonStr;
				document.body.appendChild(oInput);
				oInput.select(); // 选择对象
				try {
					document.execCommand('copy');
					mui.toast('复制成功');
				}catch (err) {
					mui.toast('请使用CTRL+C来复制');
				}
				oInput.className = 'oInput';
				oInput.style.display='none';
			}
			
		</script>
	</body>
</html>
